<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
</head>
<style>
    .trans_box{
        border: 1px solid #000;
        height: 480px;
        width: 100%;
        padding: 20px;
    }
    .trans_list{
        border: 1px solid;
        margin: 10px;
        width: 68px;
        height: 68px;
        text-align: center;
        font-size: 9px;
        line-height: 68px;
        background-color: #f0f3f9;
    }
    .ease {
        -webkit-transition: all 4s ease;
        -moz-transition: all 4s ease;
        -o-transition: all 4s ease;
        transition: all 4s ease;
    }
    .ease_in {
        -webkit-transition: all 4s ease-in;
        -moz-transition: all 4s ease-in;
        -o-transition: all 4s ease-in;
        transition: all 4s ease-in;
    }
    .ease_out {
        -webkit-transition: all 4s ease-out;
        -moz-transition: all 4s ease-out;
        -o-transition: all 4s ease-out;
        transition: all 4s ease-out;
    }
    .ease_in_out {
        -webkit-transition: all 4s ease-in-out;
        -moz-transition: all 4s ease-in-out;
        -o-transition: all 4s ease-in-out;
        transition: all 4s ease-in-out;
    }
    .linear {
        -webkit-transition: all 4s linear;
        -moz-transition: all 4s linear;
        -o-transition: all 4s linear;
        transition: all 4s linear;
    }
    .trans_box:hover .trans_list, .trans_box_hover .trans_list {
        margin-left:89%;
        background-color:#beceeb;
        color:#333;
        -webkit-border-radius:25px;
        -moz-border-radius:25px;
        -o-border-radius:25px;
        border-radius:25px;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
</style>
<body>
<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease_in</div>
    <div class="trans_list ease_out">ease_out</div>
    <div class="trans_list ease_in_out">ease_in_out</div>
    <div class="trans_list linear">linear</div>
</div>
</body>
</html>